<template>
    <div class="mainwrap" style="max-width:750px; margin:0 auto;left:50%;top:50%;transform: translate(-50%, -50%);-webkit-transform: translate(-50%, -50%)">
        <div class="my-header"><slot name="header"/></div>
        <div ref="myMain" class="my-main" :class="{'noCroll':disableScroll}">
            <div ref="myContent" class="my-content">
                <slot/>
                <div class="btmsg" v-if="loading">
                    <van-loading size="14px" v-if="!end">加载中...</van-loading>
                    <span class="noData" v-else>{{overText||'已经到底了！'}}</span>
                </div>
            </div>
        </div>
        <div class="my-footer"><slot name="footer"/></div>
    </div>
</template>

<script setup>
import {ref,onMounted,nextTick} from "vue"
const props = defineProps({
    loading:{ // 是否开启滚动到底部加载更多
        type:Boolean,
        default:()=>false // 默认不开启
    },
    offset:{  // 滚动条距离底部的距离小于该值就触发加载更多
        type:Number,
        default: 60
    },
    end:{  // 数据全部加载完成标志
        type:Boolean,
        default: false
    }, 
    load:Function,  //加载数据，由组件调用者传入， 此函数必须返回一个Promise对象
    overText:{
        type:String,
        default:'已经到底了！'
    },
    disableScroll:{  // 禁用主体区域（my-main）滚动（滚动条）
        type:Boolean,
        default: false
    },
    outOnScroll:Function  // 滚动监听，调用者可能需要监听滚动的高度等
})

const emit = defineEmits(['eleLoadOver'])

const wrap = ref(null)
const con = ref(null)
const myMain = ref(null)
const myContent = ref(null)

onMounted(async ()=>{
    await nextTick()
    emit('eleLoadOver',{ele:myMain.value}) // 把元素传出去
    if(props.loading && !props.end){
        wrap.value = myMain.value
        con.value = myContent.value
        //setTimeout(()=>{
            wrap.value.onscroll = ()=>{
                onBottomLoadInit()
            }
        //},1000) 
    }
})
const onBottomLoadInit = async ()=>{
    const wrap_h = wrap.value.offsetHeight 
    const con_h = con.value.offsetHeight
    const wrap_sh = wrap.value.scrollTop
    props.outOnScroll && props.outOnScroll(wrap_sh) // 如果调用者有滚动监听，则返回滚动高度
    if((con_h - wrap_h - wrap_sh) <=  props.offset){
        //console.log("触发了")
        wrap.value.onscroll = null
        await props.load()
        if(!props.end){
            wrap.value.onscroll = onBottomLoadInit
        }else if(props.outOnScroll){ // 表示数据加载完（即到底部了），判断是否onscroll，有的话从添加监听
            state.wrap.onscroll = ()=>{
                props.outOnScroll(state.wrap.scrollTop) // 参数为滚动的高度
            }
        }
    }
}
</script>

<style lang="scss" scoped>
    .mainwrap{
        position: fixed;
        z-index: 100;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        display: flex;
        flex-flow: column;
        .my-main{
            flex:1;
            overflow: hidden;
            overflow-y: auto;
            -webkit-overflow-scrolling : touch; 
            &.noCroll{
                overflow: hidden;
                .my-content{
                    height: 100%;
                }
            }
            .btmsg{
                text-align: center;
                padding: 20px 0 30px 0;
            }
            .noData{
                display: block;
                color:#999;
                text-align: center;
            }
        }
    }
</style>